<template>
  <div>
    <h1>组件事件emit</h1>
    <div>
      <h2>SonDemo8</h2>
      <SonDemo8 class="groupBorder" msg="999" :user="user" @son-emit="emitHandler"></SonDemo8>
      <SonDemo10
        class="groupBorder"
        :user="user"
        @son-emit="emitHandler"
        @son-emit2="emitHandler2"
      ></SonDemo10>
      <Study1StuDemo2 class="groupBorder" @inFocus="inFocusHandler"></Study1StuDemo2>
      <h2>SonDemo11</h2>
      <SonDemo11 class="groupBorder" :user @submit1="submitHandler"></SonDemo11>
      <h2>SonDemo12</h2>
      <SouDemo12 class="groupBorder" :user="user" @editUser="editUserHandler"></SouDemo12>
      <h2>SonDemo13</h2>
      <h4>coun:{{ coun }}</h4>
      <SouDemo13 class="groupBorder" @fun="fun"></SouDemo13>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type Iuser } from './components/SonDemo8.vue'
import SonDemo8 from './components/SonDemo8.vue'
import SonDemo10 from './components/SonDemo10.vue'
import Study1StuDemo2 from '@/views/tudy1/components/StuDemo2.vue'
import SonDemo11 from './components/SonDemo11.vue'
import SouDemo12 from './components/SouDemo12.vue'

import SouDemo13 from './components/SonDemo13.vue'

const coun = ref(1)

const fun = (n1: number) => {
  coun.value = coun.value + n1
}

const user = ref<Iuser>({
  name: '李四',
  age: 23,
  sex: '男'
})

const emitHandler = (p1: number, p2: string, p3: { name: string }) => {
  console.log('此函数是由子组件使用emit触发调用', p1, p2, p3)
}
const emitHandler2 = () => {
  console.log(' @son-emit2="emitHandler2"')
}
const inFocusHandler = () => {
  console.log('@inFocus="inFocusHandler"')
}
const submitHandler = () => {
  console.log(' submitHandler')
}
const editUserHandler = (user: Iuser) => {
  console.log(user, 'editUserHandler')
}
</script>

<style lang="scss" scoped>
.groupBorder {
  border: 2px solid #2888c3;
  padding: 10px;
  margin: 10px;
}
</style>
